/**
 * 学习目标：使用 setState 修改状态
 * setState的作用：更新state，驱动界面变化
 * 语法： this.setState({属性名：值})
 * 注意：只能通过 setState 修改数据 - 不允许直接修改 state
 */
import React from 'react';
import ReactDOM from 'react-dom';

// 快捷键 - inc
class App extends React.Component {
  state = {
    msg: 'react',
    count: 100,
  };

  handleClick = () => {
    // console.log('this -----> ', this);
    // 修改状态的唯一方法
    this.setState({ count: this.state.count + 1 });
    // 注意：只能通过 setState 修改数据 - 不允许直接修改 state
    // ❌this.state.count += 1;
    // ❌this.setState({ count: (this.state.count += 1) });
  };
  render() {
    return (
      <div>
        <div>
          App - {this.state.msg} - {this.state.count}
        </div>
        <button onClick={this.handleClick}>点我修改 msg 和 count</button>
      </div>
    );
  }
}

ReactDOM.render(<App></App>, document.getElementById('root'));
